<template>
	<view class="draw-result">
		<Nav title="" @back="goBack"></Nav>
		<SinglePump v-if="openType==1" :openMagicBox="openMagicBox"></SinglePump>
		<FivePump v-else-if="openType==5" :openMagicBox="openMagicBox"></FivePump>
		<view class="btns" v-if="tryDo==1">
			<view class="btn btn1" @click="goReal">
				<text>去玩把真的</text>
			</view>
		</view>
		<view class="btns" v-else>
			<view class="btn btn1" @click="goMyBox">
				<text>不喜欢，回收</text>
			</view>
			<view class="btn btn2" @click="againOnce">
				<text>再来一发</text>
			</view>
		</view>
		<view class="bottom" v-if="tryDo==1">
			<text>试玩结果仅供参考</text>
		</view>
		<view class="bottom" v-else @click="goBoxList">
			<image src="../../../../static/image/draw-box.png" mode="widthFix"></image>
			<text>前往盒柜查看提货 ></text>
		</view>
		<!-- <uni-popup class="pop" ref="popup" type="bottom">
			<recycle-pop @closePop="closePop"></recycle-pop>
		</uni-popup> -->
	</view>
</template>

<script>
	import Nav from "@/components/magic-box/magic-nav/index.vue";
	import navMixin from "@/common/js/nav.js"
	import SinglePump from "./SinglePump.vue";
	import FivePump from "./FivePump.vue";
	import RecyclePop from "@/components/magic-box/recycle-pop/index.vue";
	export default {
		components: {
			Nav,
			SinglePump,
			FivePump,
			RecyclePop
		},
		props: {
			tryDo: {
				type: String,
				default: ''
			},
		},
		mixins: [navMixin],
		data() {
			return {
				openType: 1, // 开盒的类型
				openMagicBox: []
			}
		},
		created() {
			this.openMagicBox = uni.getStorageSync('openMagicBox');
			if (this.openMagicBox.length == 1) {
				this.openType = 1;
			} else if (this.openMagicBox.length == 5) {
				this.openType = 5;
			}
		},
		beforeDestroy() {
			uni.removeStorageSync('openMagicBox');
		},
		methods: {
			goMyBox() {
				this.$util.redirectTo('/magicpages/my_box/my_box', {
					// backType: 1
				});
			},
			goReal() {
				uni.navigateBack({
					delta: 1
				});
			},
			// openPop() {
			// 	this.$refs.popup.open();
			// },
			// closePop(){
			// 	this.$refs.popup.close();
			// },
			againOnce() {
				uni.navigateBack({
					delta: 1
				});
			},
			goBoxList() {
				this.$util.redirectTo('/magicpages/magic/box_ark');
			},
			goBack() {
				if (getCurrentPages().length == 1) {
					console.log("trigger----")
					uni.switchTab({
						url: "/pages/index/index/index"
					})
					return
				}
				this.againOnce();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.draw-result {
		width: 100%;
		height: 100vh;
		background: url(../../../../static/image/draw-result-bg.png);
		background-size: 100% 100%;
		position: relative;


		.btns {
			display: flex;
			justify-content: space-around;
			z-index: 10;
			position: absolute;
			bottom: 183rpx;
			left: 50%;
			transform: translateX(-50%);

			.btn {
				width: 322rpx;
				height: 83rpx;
				font-size: 31rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				transform: rotateZ(5deg) skew(-5deg, -5deg);
				margin: 0 7rpx;

				&>text {
					transform: rotateZ(-5deg) skew(5deg, 5deg);
				}

				&.btn1 {
					background: linear-gradient(270deg, #2644F5 0%, #17A4FF 100%);
					box-shadow: 4px 4px 10rpx rgba(23, 164, 255, 0.5);

				}

				&.btn2 {
					background: linear-gradient(270deg, #9A40FF 0%, #FF2EB3 100%);
					box-shadow: 4px 4px 4rpx rgba(255, 46, 179, 0.5);
				}
			}

		}

		.bottom {
			position: absolute;
			bottom: 98rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;

			&>image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 29rpx;
			}

			&>text {
				font-size: 25rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #232323;
			}
		}

		.pop {
			/deep/ .uni-popup__wrapper.uni-custom {
				border-top-left-radius: 45rpx;
				border-top-right-radius: 45rpx;

				.uni-popup__wrapper-box {
					border-top-left-radius: 45rpx;
					border-top-right-radius: 45rpx;
					overflow-y: visible;
				}
			}
		}

	}
</style>
